{% extends 'layout/basicplus.html' %}

{% block title %}register{% endblock %}

{% block css %}
    <style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
    </style>
{% endblock %}

{% block content %}
    <body class="gray-bg">

    <div class="loginscreen animated fadeInDown account">
        <div style="text-align: center;">
            <img id="acode" src="#"
                 style="width:1200px; height: 800px;">
        </div>
        <div style="text-align: center;">
            <input id="btnSub" type="button" class="btn btn-primary" style="width: 100px" value="点击打开">
            <span class="error-msg"></span>
        </div>
        <div></div>

    </div>
    </body>



{% endblock %}

{% block js %}
    <script>

        function refresh() {
            var oldSrc = $('#acode').attr('src');
            $('#acode').attr('src', oldSrc + '?' + Math.random());
        }

        $(function () {
            bindClickBtnSub();
        });

        function bindClickBtnSub() {
            $('#btnSub').click(function () {
                var check = $('#btnSub').val()
                $.ajax({
                    url: "/web/send/video/",
                    type: "GET",
                    data: {check_video: check},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status == "1") {
                            $("#acode").attr("src", "/web/static/img/video/video.jpg");

                            event_flag = setInterval(refresh, 500)

                            $("#btnSub").val("点击关闭")
                        } else if (res.status == "2") {
                            $("#acode").attr("src", "#");
                            $("#btnSub").val("点击打开")
                            clearInterval(event_flag);
                        } else {
                            $("#btnSub").next().text(res.error);
                            $("#btnSub").val("点击打开")
                        }
                    }
                })
            })
        }


    </script>

{% endblock %}